<template>
  <div class="w-full mb-[16px] direction-column">
    <div class="w-full flex justify-center relative">
      <el-image class="w-[100%]" :src="bgImgPath?.bgImg27" lazy />
      <div
        class="w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4">
        <div class="text-white text-center">
          <div class="text-3xl mb-4 font-bold text-[#ff6839]">
            {{ servicesConfig?.title }}
          </div>

        </div>
      </div>
    </div>
    <div class="w-full container bg-[#f2f2f2]">
      <el-image :src="iconPath?.icon12" lazy />
      <div class="">
        <div class="text-[25px] text-white font-bold bg-[#3498db] px-4 w-fit">
          {{ servicesConfig?.items[0].title }}
        </div>
        <div class="text-[15px] text-gray-600 mt-2">
          {{ servicesConfig?.items[0].description }}
        </div>
        <div class="text-[25px] text-white font-bold bg-[#3498db] px-4 w-fit mt-6">
          {{ servicesConfig?.items[1].title }}
        </div>
        <div class="text-[15px] text-gray-600 mt-2">
          {{ servicesConfig?.items[1].description }}
        </div>
        <div class="text-[25px] text-white font-bold bg-[#3498db]  px-4 w-fit mt-6">
          {{ servicesConfig?.items[2].title }}
        </div>
        <div class="text-[15px] text-gray-600 mt-2">
          {{ servicesConfig?.items[2].description }}
        </div>
        <div class="text-[25px] text-white font-bold bg-[#3498db] px-4 w-fit mt-6">
          {{ servicesConfig?.items[3].title }}
        </div>
        <div class="text-[15px] text-gray-600 mt-2">
          {{ servicesConfig?.items[3].description }}
        </div>
      </div>
    </div>
    <div class="container">
      <el-image class="w-[100%] mt-4" :src="bgImgPath?.bgImg22" lazy />
      <div class="w-[100%] h-[300px] bg-[#87CEFA] flex direction-column">
        <div class="text-[25px] text-white font-bold mb-2">{{ servicesConfig?.TeamStrength }}</div>
        <div class="text-[15px] pl-8 pr-8 text-white">{{ servicesConfig?.TeamStrengthDesc }}</div>
      </div>
      <el-image class="w-[100%] mt-1" :src="bgImgPath?.bgImg23" lazy />
      <el-image class="w-[100%]" :src="bgImgPath?.bgImg24" lazy />
      <el-image class="w-[100%]" :src="bgImgPath?.bgImg25" lazy />
      <div class="w-[100%] h-[300px]  flex direction-column">
        <div class="text-[25px] font-bold mb-2">{{ servicesConfig?.serviceMindset }}</div>
        <div class="text-[15px] pl-8 pr-8">{{ servicesConfig?.serviceMindsetDesc }}</div>
      </div>
    </div>
    <div class="w-full container flex justify-center relative mt-[16px]">
      <el-image class="h-[500px]" :src="bgImgPath?.bgImg11" lazy />
      <div v-if="currentLanguage == 'en'">
        <div class="absolute  top-[50px] left-1/2 transform -translate-x-1/2  text-[50px] font-bold text-gray-600">
          {{ servicesConfig?.logistics }}
        </div>
        <div class="w-full absolute top-[100px] left-1/2 transform -translate-x-1/2 text-[15px] font-bold p-6">
          <p class="" v-for="item in servicesConfig?.logisticsDesc">{{ item }}</p>
        </div>
      </div>
      <template v-else>
        <div class="absolute top-[20%] left-1/2 transform -translate-x-1/2 text-[70px] font-bold text-gray-600">
          {{ servicesConfig?.logistics }}
        </div>
        <div class="w-full absolute top-[35%] left-1/2 transform -translate-x-1/2 text-[15px] font-bold p-6">
          <p class="tracking-widest" v-for="item in servicesConfig?.logisticsDesc">{{ item }}</p>
        </div>
      </template>
    </div>
    <div class="w-full container flex justify-center relative mt-[16px]">
      <el-image class="h-[500px]" :src="bgImgPath?.bgImg12" lazy />
      <template v-if="currentLanguage == 'en'">
        <div class="absolute top-[50px] left-1/2 transform -translate-x-1/2 text-[50px] font-bold text-gray-600">
          {{ servicesConfig?.install }}
        </div>
        <div class="w-full absolute top-[100px] left-1/2 transform -translate-x-1/2 text-[15px] font-bold p-6">
          <p class="tracking-widest" v-for="item in servicesConfig?.installDesc">{{ item }}</p>
        </div>
      </template>
      <template v-else>
        <div class="absolute top-[20%] left-1/2 transform -translate-x-1/2 text-[70px] font-bold text-gray-600">
          {{ servicesConfig?.install }}
        </div>
        <div class="w-full absolute top-[35%] left-1/2 transform -translate-x-1/2 text-[15px] font-bold p-6">
          <p class="tracking-widest" v-for="item in servicesConfig?.installDesc">{{ item }}</p>
        </div>
      </template>

    </div>
    <div class="w-full container flex justify-center relative mt-[16px] mb-[16px]">
      <el-image class="h-[500px]" :src="bgImgPath?.bgImg13" lazy />
      <template v-if="currentLanguage == 'en'">
        <div class="absolute top-[50px] left-1/2 transform -translate-x-1/2 text-[50px] font-bold text-gray-600">
          {{ servicesConfig?.warehouse }}
        </div>
        <div class="w-full absolute top-[100px] left-1/2 transform -translate-x-1/2 text-[15px] font-bold p-6">
          <p class="tracking-widest" v-for="item in servicesConfig?.warehouseDesc">{{ item }}</p>
        </div>
      </template>
      <template v-else>
        <div class="absolute top-[20%] left-1/2 transform -translate-x-1/2 text-[70px] font-bold text-gray-600">
          {{ servicesConfig?.warehouse }}
        </div>
        <div class="w-full absolute top-[35%] left-1/2 transform -translate-x-1/2 text-[15px] font-bold p-6">
          <p class="tracking-widest" v-for="item in servicesConfig?.warehouseDesc">{{ item }}</p>
        </div>
      </template>

    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useConfig } from '@/composables/useConfig'
import bgImgPath from "./bgImgPath/index";
import iconPath from "./bgImgPath/iconPath";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);
const { getServicesConfig } = useConfig();
const servicesConfig = computed(() => getServicesConfig());

onMounted(() => {

})
</script>

<style scoped>
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* 自定义样式 */
.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>